<template>
  <n-form
    ref="formRef"
    :model="formData"
    :rules="buttonRules"
    label-placement="left"
    :label-width="100"
  >
    <n-form-item label="按钮名称" path="name">
      <n-input placeholder="请输入按钮名称" v-model:value="formData.name" />
    </n-form-item>
    <n-form-item label="排序" path="order">
      <n-input-number placeholder="请输入排序" v-model:value="formData.order" />
    </n-form-item>
    <n-form-item label="权限标识" path="perms">
      <n-input placeholder="请输入权限标识" v-model:value="formData.perms" />
    </n-form-item>
    <n-form-item label="状态" path="status">
      <n-switch v-model:value="formData.status">
        <template #checked>启用</template>
        <template #unchecked>禁用</template>
      </n-switch>
    </n-form-item>
  </n-form>
</template>

<script lang="ts" setup>
import { buttonRules } from "./rules";
import { FormInst } from "naive-ui";
import { Props, Emits, useForm } from "./service";
import { BUTTON_CODE } from "../config";

const props = defineProps<Props>();
const emits = defineEmits<Emits>();

const formRef = ref<FormInst>();
const valid = () => formRef.value?.validate();
const restoreValid = () => formRef.value?.restoreValidation();

const { formData, handleSubmit, handleReset } = useForm({
  type: BUTTON_CODE,
  props,
  emits,
  restoreValid,
});

defineExpose({ handleSubmit, handleReset, valid });
</script>
